<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #app {
            width: 80%;
            margin: 30px auto;
        }

        .table {
            overflow: hidden;
        }

        .item {
            float: left;
            width: 200px;
            height: 300px;
            border: 1px solid rosybrown;
            margin: 5px;
        }

        .item img {
            width: 200px;
            height: 200px;
        }

        .page button {
            float: left;
            margin-left: 10px;
            width: 100px;
            height: 40px;
        }

        .page .content {
            float: left;
        }

        .page .content .item {
            float: left;
            width: 50px;
            height: 40px;
            background-color: black;
            color: cadetblue;
            text-align: center;
            line-height: 40px;
        }

        .page .content .active {
            background-color: crimson;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="search">
            <div>搜索<input type="text" v-model="key"></div>
            <div>类别：
                <input type="radio" value="" v-model="type" />全部
                <input type="radio" value="1" v-model="type" />服装
                <input type="radio" value="2" v-model="type" />鞋子
                <input type="radio" value="3" v-model="type" />箱包
                <input type="radio" value="4" v-model="type" />美妆
            </div>

            <div>排序字段
                <input type="radio" value="id" v-model="sort">编号
                <input type="radio" value="goodsprice" v-model="sort">价格
            </div>

            <div>排序方式
                <input type="radio" value="asc" v-model="order">从小到大
                <input type="radio" value="desc" v-model="order">从大到小
            </div>

            <div>价格区间
                <input type="text" v-model="start">到<input type="text" v-model="end">
            </div>

        </div>
        <div class="table">
            <div class="item" v-for="item in  list">
                <!-- <img :src="item.goodsimg" /> -->
                <p>{{item.goodsname}}</p>
                <p>商品价格{{item.goodsprice}} 商品数量{{item.goodsnum}}</p>
            </div>

        </div>

        <div>
            <button @click="prev" v-if="page>1">上一页</button>
            <button disabled v-else>上一页</button>
            <button @click="next" v-if="page<maxPage">下一页</button>
            <button disabled v-else>下一页</button>
        </div>

    </div>

</body>
<script>
    new Vue({
        el: "#app",

        data: {
            key: "",
            type: "",
            sort: "id",
            order: "asc",
            start: "",
            end: "",
            page: "1",//当前页面
            limit: "3",//每页的数据
            maxPage: "10",//最大页码数
            total: "10",//数据总数
            list: [],//商品列表
            pagelist: [1, 2, 3, 4, 5],
            showpage: "5",
        },
        watch: {
            key() {
                this.page = 1;
                this.search();
            },
            type() {//当type发生改变的时候 就触发
                //查询
                this.page = 1;
                this.search();
            },
            sort() {
                this.search();
            },
            order() {
                this.search();
            },
            start() {
                this.page = 1;
                this.search();
            },
            end() {
                this.page = 1;
                this.search();
            },
            page() {
                this.search();
            },
        },
        methods: {
            prev() {
                this.page--
            },
            next() {
                this.page++
            },



            async search() {
                console.log(this.key);
                let params = {
                    q: this.key,
                    _sort: this.sort,
                    _order: this.order,

                    _limit: this.limit,
                    _page: this.page,
                };
                if (this.start) {
                    params.goodsprice_gte = this.start;
                };
                if (this.end) {
                    params.goodsprice_lte = this.end;
                };

                console.log(params);
                console.log(this.type);
                console.log(this.sort);
                console.log(this.order);
                if (this.type) {
                    params.type = this.type;
                }

                let { data: list } = await axios({
                    method: "get", url: "http://localhost:2345/goodsinfo", params
                })

                console.log(params._limit, params._page);

                delete params._limit;
                delete params._page;

                let { data: list2 } = await axios({
                    method: "get",
                    url: "http://localhost:2345/goodsinfo",
                    params
                })

                this.total = list2.length;
                console.log(this.total);

                this.maxPage = Math.ceil(this.total / this.limit);
                console.log(this.maxPage);

                let pageStart = 1;
                let pageEnd = 5;
                let pageMid = Math.ceil(this.showpage / 2);

                pageEnd = this.maxPage > this.showpage ? this.showpage : this.maxPage//判断最后一页的页码




                this.list = list;
            }
        },
        async created() {//页面加载的时候 请求所有数据
            // let { data: list } = await axios({
            //     method: "get",
            //     url: "http://localhost:2345/goodsinfo",
            //     params: {
            //     }
            // })
            // this.list = list;
            this.search();
        }
    })

</script>

</html>